<template>
  <div class="container">
    <p class="h" style="
        font-size: 32px;
        width: 100vw;
        background-color: blueviolet;
        text-align: center;
      ">
      中国各省份人口流向统计系统
    </p>

    <div class="top">
      <el-carousel height="90px" direction="vertical" :autoplay="true" indicator-position="none">
        <el-carousel-item v-for="(city, index) in group" :key="index" @click.native="selectCity(city)">
          <el-button class="medium">{{ city.name }}</el-button>
          <p>当前人口: {{ city.population.toLocaleString() }}</p>
          <p>增长速度: {{ city.growthRate }}%</p>
          <p>减少速度: {{ city.decreaseRate }}%</p>
          <p>增长人数: {{ city.increaseCount.toLocaleString() }}</p>
          <p>减少人数: {{ city.decreaseCount.toLocaleString() }}</p>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="center">
      <div class="column left">
        <div class="a" ref="chart"></div>
        <div class="b" ref="thirdChart"></div>
      </div>
      <div class="column middle">中列</div>
      <div class="column right">
        <div class="c" ref="secondChart"></div>
        <div class="d">
          <el-input v-model="newNewsTitle" placeholder="请输入新闻标题"></el-input>
          <el-input type="textarea" :rows="2" v-model="newNewsDescription" placeholder="请输入新闻描述"></el-input>
          <el-button type="primary" @click="addNews">添加新闻</el-button>
          <el-button type="primary"  @click="toggleShowChild">点击按钮</el-button>
          <el-button type="primary" @click="tiaozhuan">跳转到TWO</el-button>
          
          <div class="e">
            <el-select v-model="value" placeholder="请选择" @change="handleSelectChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-time-select v-model="time" :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }" placeholder="选择时间">
            </el-time-select>
          </div>
          <el-carousel :interval="3000" type="card" height="300px" :autoplay="true" indicator-position="none"
            arrow="never" ref="carousel">
            <el-carousel-item v-for="(item, index) in news" :key="index">
              <h3 class="medium">{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <MakeView  v-if="showChild" @closed="showChild = false"></MakeView>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      showChild: false,
      group: [
        {
          name: "北京",
          population: 21886000,
          growthRate: 0.5,
          decreaseRate: 0.1,
          increaseCount: 0,
          decreaseCount: 0,
        },
        {
          name: "上海",
          population: 24281000,
          growthRate: 0.4,
          decreaseRate: 0.1,
          increaseCount: 0,
          decreaseCount: 0,
        },
        {
          name: "广州",
          population: 15306000,
          growthRate: 0.6,
          decreaseRate: 0.1,
          increaseCount: 0,
          decreaseCount: 0,
        },
        {
          name: "深圳",
          population: 17560000,
          growthRate: 0.7,
          decreaseRate: 0.1,
          increaseCount: 0,
          decreaseCount: 0,
        },
      ],
      news: [
        {
          title: "全球气候变化会议达成新协议",
          description:
            "各国代表在最新一届全球气候变化会议上通过了一项具有里程碑意义的新协议，旨在加速减少温室气体排放，并促进可再生能源的发展。",
        },
        {
          title: "人工智能伦理新进展",
          description:
            "国际社会共同制定了针对人工智能应用的一系列伦理指导原则，确保AI技术的发展能够更加公平、透明，同时保护用户隐私。",
        },
        {
          title: "太空探索新突破",
          description:
            "某国成功发射了首个载人火星探测任务，标志着人类深空探索的新篇章，预计此次任务将为未来的星际旅行提供宝贵的数据支持。",
        },
        {
          title: "新型疫苗对抗未知病毒",
          description:
            "面对一种新的全球性健康威胁，科学家们迅速研发出一种高效的疫苗，并在全球范围内推广接种，有效遏制了疫情的扩散。",
        },
        {
          title: "数字经济快速增长",
          description:
            "随着互联网基础设施的不断完善和技术的进步，数字经济持续增长，电子商务、远程办公等领域展现出强劲的发展势头，成为推动全球经济复苏的重要力量。",
        },
        {
          title: "海洋生态保护取得重要成果",
          description:
            "经过多年的努力，多个国家联合实施的海洋保护计划取得了显著成效，多个濒危物种数量有所回升，海洋生态系统逐步恢复健康状态。",
        },
      ],
      selectedCity: "北京",
      input: "",
      newNewsTitle: "", // 新闻标题
      newNewsDescription: "", // 新闻描述
      time: "",
      cityData: {
        北京: [150, 230, 224, 218, 135, 147, 260],
        上海: [120, 190, 180, 170, 115, 127, 240],
        广州: [160, 240, 230, 220, 145, 157, 270],
        深圳: [170, 250, 240, 230, 155, 167, 280],
      },
      chartInstance: null,
      secondChartInstance: null,
      thirdChartInstance: null,
      options: [
        {
          value: "选项1",
          label: "全球气候变化会议达成新协议",
        },
        {
          value: "选项2",
          label: "人工智能伦理新进展",
        },
        {
          value: "选项3",
          label: "太空探索新突破",
        },
      ],
      value: "",
    };
  },
  mounted() {
    this.startPopulationSimulation();
    this.initChart();
    this.initSecondChart();
    this.initThirdChart();
  },
  methods: {
    startPopulationSimulation() {
      setInterval(() => {
        this.group.forEach((city) => {
          const growthFactor = 1 + city.growthRate / 100;
          const decreaseFactor = 1 - city.decreaseRate / 100;

          const previousPopulation = city.population;
          city.population *= growthFactor;
          city.population *= decreaseFactor;

          city.increaseCount = Math.round(
            previousPopulation * growthFactor - previousPopulation
          );
          city.decreaseCount = Math.round(
            previousPopulation * (1 - decreaseFactor)
          );
        });
      }, 1000); // 每秒更新一次
    },
    initChart() {
      const option = {
        title: {
          text: "北上广深近七日人口涌入统计",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          name: "日期",
          data: ["7.1", "7.2", "7.3", "7.4", "7.5", "7.6", "7.7"],
        },
        yAxis: {
          type: "value",
          name: "人口涌入数量",
        },
        series: [
          {
            data: this.cityData[this.selectedCity],
            type: "line",
          },
        ],
      };

      this.chartInstance = echarts.init(this.$refs.chart);
      this.chartInstance.setOption(option);
    },
    selectCity(city) {
      this.selectedCity = city.name;
      this.updateChart();
    },
    updateChart() {
      if (!this.chartInstance) return;

      const newOption = {
        title: {
          text: `${this.selectedCity} 近七日人口涌入统计`,
        },
        series: [
          {
            data: this.cityData[this.selectedCity],
            type: "line",
          },
        ],
      };

      this.chartInstance.setOption(newOption);
    },
    initSecondChart() {
      const option = {
        title: {
          text: "北上广深近七日人口流失统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          name: "日期",
          data: ["7.1", "7.2", "7.3", "7.4", "7.5", "7.6", "7.6"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "北京",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "上海",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "广州",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },

          {
            name: "深圳",
            type: "line",
            stack: "Total",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };

      this.secondChartInstance = echarts.init(this.$refs.secondChart);
      this.secondChartInstance.setOption(option);
    },
    initThirdChart() {
      const option = {
        title: {
          text: "7.1日北上广深人口涌入vs人口流失",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          bottom: "5%", // 设置图例距离底部的距离
          left: "center",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          // boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["北京", "上海", "广州", "深圳"],
        },
        series: [
          {
            name: "涌入",
            type: "bar",
            data: [150, 120, 160, 170],
          },
          {
            name: "流失",
            type: "bar",
            data: [120, 220, 150, 820],
          },
        ],
      };
      this.thirdChartInstance = echarts.init(this.$refs.thirdChart);
      this.thirdChartInstance.setOption(option);
    },
    handleSelectChange(value) {
      let selectedIndex = parseInt(value.replace("选项", "")) - 1; // 解析出索引
      if (!isNaN(selectedIndex)) {
        this.$refs.carousel.setActiveItem(selectedIndex); // 切换到对应的新闻
      }
    },
    addNews() {
      if (this.newNewsTitle && this.newNewsDescription) {
        this.news.push({
          title: this.newNewsTitle,
          description: this.newNewsDescription,
        });
        // 清空输入框
        this.newNewsTitle = "";
        this.newNewsDescription = "";
      } else {
        alert("请输入新闻标题和描述！");
      }
    },
    toggleShowChild() {
      this.showChild = !this.showChild;
    },
    tiaozhuan(){
      this.$router.push('/wechat')
    }
  },
};
</script>
<style scoped>
.container {
  display: flex;
  height: 100vh;
  position: relative;
}

.h {
  position: absolute;
  top: -40px;
  left: 0;
}

.top {
  width: 100vw;
  position: absolute;
  top: 33px;
  left: 0;
}

.el-carousel__item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  color: #475669;
  opacity: 0.75;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-carousel__item button {
  margin: 0;
  line-height: 1.5;
  font-size: 50px;
  margin-left: 20px;
  background-color: #8522;
  color: #000;
  border: #000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* 较浅的阴影 */
    0 6px 20px rgba(0, 0, 0, 0.19);
  /* 较深的阴影 */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.el-carousel__item p {
  margin-top: 10px;
  font-size: 14px;
  margin-right: 20px;
}

.center {
  width: 100vw;
  height: 100vh;
  background-color: rgb(191, 184, 175);
  /* color: #000; */
  position: absolute;
  top: 125px;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* gap: 10px; */
  /* border: 1px solid black; */
}

.column {
  padding: 10px;
  text-align: center;
}

.left,
.right {
  width: 400px;
  height: 300px;
  /* background-color: #f4f4f4; */
}

.middle {
  background-color: #ddd;
}

.a {
  width: 380px;
  height: 300px;
}

.b {
  width: 380px;
  height: 300px;
}

.c {
  width: 380px;
  height: 210px;
  /* margin: 10px; */
}

.d {
  margin-top: 50px;
}

.el-carousel__item h3 {
  color: black;
  font-size: 20px;
  opacity: 0.75;
  line-height: 20px;
  margin: 0;
  width: 200px;
}

.el-carousel__item:nth-child(2n) {
  background-color: rgb(120, 110, 97);
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #50325e;
}

.el-carousel__item p {
  color: black;
  font-size: 18px;
}

.e {
  display: flex;
  flex-direction: row;
}
</style>
